<template>
    <Card>
        <Row :gutter='8'>
            <Col span='6'>
                <Select v-model="status1">
                    <Option value='0'>按小时展示</Option>
                </Select>
            </Col>
            <Col span='5'>
                <Select v-model="status2">
                    <Option value='0'>按小时展示</Option>
                </Select>
            </Col>
            <Col span='5'>
                <Select v-model="status3">
                    <Option value='0'>按天展示</Option>
                </Select>
            </Col>
            <Col span='2'>
                <Button style='width:100%'>搜索</Button>
            </Col>
            <Col span='3'>
                <Button style='width:100%'>获取最新用水</Button>
            </Col>
            <Col span='3'>
                <Button style='width:100%'>导出报表</Button>
            </Col>
        </Row>
        <br>
        <br>
        <Row>
            <Table border ref="selection" :columns="columns" :data="renters"></Table>
        </Row>


        <Page :total="100" :page-size="15" show-elevator show-total style="text-align:center"></Page>
    </Card>
</template>
<script type="text/javascript">
import util from '@/libs/util'
// import {http, methods, api} from "@/libs/http";

export default {
  name: 'room_water',
  data () {
    return {
      status1: '',
      status2: '',
      status3: '',
      columns: [
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '姓名',
          key: 'name',
          align: 'center'
        },
        {
          title: '手机号',
          key: 'phone',
          align: 'center'
        },
        {
          title: '入住状态',
          key: 'state',
          align: 'center',
          render: (h, params) => {
            return params.row.state ? '已入住' : '未入住'
          }
        },
        {
          title: '身份证号',
          key: 'idcard',
          align: 'center'
        },
        {
          title: '操作',
          key: 'action',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  class: {
                    'renter-list-hide': !params.row.state
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showDetail(params.index)
                    }
                  }
                },
                '详情'
              ),

              h(
                'Button',
                {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  class: {
                    'renter-list-hide': params.row.state
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      util.log('params', params)
                      this.showCheckIn(params.index)
                    }
                  }
                },
                '入住'
              ),

              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  class: {
                    'renter-list-hide': params.row.state
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.del(params.index)
                    }
                  }
                },
                '删除'
              )
            ])
          }
        }
      ],
      renters: [
        {
          name: '冬狮郎',
          phone: 18900001234,
          state: 1,
          idcard: '440302199012238000'
        },
        {
          name: '冬狮郎',
          phone: 18900001234,
          state: 0,
          idcard: '440302199012238000'
        },
        {
          name: '冬狮郎',
          phone: 18900001234,
          state: 0,
          idcard: '440302199012238000'
        }
      ]
    }
  },
  created: function () {},
  methods: {}
}
</script>
<style lang='less'>
</style>